<template>
    <div class="register">
      <div class="left-section">
        <div class="register-left-content">
          <h1 class="title-main">智慧教室</h1>
          <p class="title-sub">打造智能化教学环境，提升教学效率</p>
        </div>
      </div>
      <div class="right-section">
        <div class="register-container">
          <p class="welcome-text">欢迎使用智慧教室</p>
          <p class="register-text">用户注册</p>
          <form class="register-form">
            <div class="el-input">
              <input 
                v-model="registerForm.userName" 
                type="text" 
                size="large" 
                auto-complete="off" 
                placeholder="账号"
              >
            </div>
            <div class="el-input">
              <input 
                v-model="registerForm.password"
                type="password"
                size="large" 
                auto-complete="off"
                placeholder="密码"
                @keyup.enter="handleRegister"
              >
            </div>
            <div class="el-input">
              <input 
                v-model="registerForm.confirmPassword"
                type="password" 
                size="large" 
                auto-complete="off"
                placeholder="确认密码"
                @keyup.enter="handleRegister"
              >
            </div>
            <div class="my-4 ml-4">
              <el-radio-group v-model="radio3" class="custom-radio-group">
                <el-radio value="1" size="small" class="custom-radio">教师</el-radio>
                <el-radio value="2" size="small" class="custom-radio">学生</el-radio>
              </el-radio-group>
            </div>
            <div class="spacer"></div> <!-- 增加一个空白的div来增加间距 -->
            <!-- <button type="submit" class="register-button">注册</button> -->
            <el-button
              :loading="loading"
              size="large" 
              type="primary"
              style="width:100%; background-color: #13227a; border-color: #13227a;"
              @click.prevent="handleRegister"
            >
              <span v-if="!loading">注 册</span>
              <span v-else>注 册 中...</span>
          </el-button>
            <p class="register-tip">已经有账号？<router-link to="/login" class="login-link">立即登录</router-link></p>
          </form>
        </div>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref, reactive, watch } from 'vue'
  import { useRouter } from 'vue-router'
  import { ElMessage } from 'element-plus'
  import axios from 'axios' // 确保已安装 axios

  const radio3 = ref('1')

  // 表单数据
  const registerForm = reactive({
    userName: '',
    password: '',
    confirmPassword: '',
    role: '1' // 使用 radio3 的值
  })

  const loading = ref(false)
  const router = useRouter()

  // 注册处理方法
  const handleRegister = async () => {
    // 表单验证
    if (!registerForm.userName || !registerForm.password || !registerForm.confirmPassword) {
      ElMessage.error('请填写完整信息')
      return
    }
    
    if (registerForm.password !== registerForm.confirmPassword) {
      ElMessage.error('两次输入的密码不一致')
      return
    }

    try {
      loading.value = true
      // 发送注册请求
      const response = await axios.post('/api/register', {
        username: registerForm.userName,
        password: registerForm.password,
        role: registerForm.role
      })

      if (response.data.code === 200) {
        ElMessage.success('注册成功')
        router.push('/login')
      } else {
        ElMessage.error(response.data.message || '注册失败')
      }
    } catch (error) {
      ElMessage.error('注册失败：' + error.message)
    } finally {
      loading.value = false
    }
  }

  // 监听角色选择
  watch(radio3, (newValue) => {
    registerForm.role = newValue
  })
  </script>
  
  <style>
  .register {
    display: flex;
    height: 100vh; /* 高度占据整个页面 */
    position: relative;
  }
  .left-section {
    flex: 1; /* 宽度平均分 */
    background: #13227a;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .register-left-content {
    text-align: center;
    color: #ffffff;
  }
  .right-section {
    flex: 1; /* 宽度平均分 */
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    background: none;
  }
  .right-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('src/assets/images/rainbow.jpg') no-repeat center center;
    background-size: cover;
    z-index: 1;
    opacity: 0.2;
  }
.register-container {
    z-index: 2;
    width: 50%; /* 宽度是右半部分宽度的一半 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    padding: 20px;
    border-radius: 8px;
  }
  .title-main {
    font-size: 36px;
    font-weight: bold;
    margin-bottom: 10px;
  }
  .title-sub {
    font-size: 18px;
  }
  .welcome-text {
    margin-bottom: 10px;
    text-align: left;
    color: #13227a;
    font-size: 18px;
  }
  .register-text {
    margin-bottom: 20px;
    text-align: left;
    color: black;
    font-weight: bold;
    font-size: 18px;
  }
  .login-form {
    width: 100%;
  }
  .el-input {
    margin-bottom: 10px;
    width: 100%;
  }
  .el-input input {
    width: 100%;
    height: 40px;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 8px; /* 角变得更圆 */
  }
  .spacer {
    height: 20px; /* 增加的间距 */
  }
  .register-button {
    width: 100%;
    height: 40px;
    background-color: #13227a;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  .register-tip {
    font-size: 13px;
    text-align: center;
    color: #bfbfbf;
  }
  .login-link {
  color: #13227a;
  text-decoration: none;
  }
  .custom-radio .el-radio__input.is-checked .el-radio__inner {
    background-color: #13227a; /* 圆点颜色 */
    border-color: #13227a; /* 边框颜色 */
  }
  .custom-radio .el-radio__input.is-checked + .el-radio__label {
    color: #13227a; /* 选择后字体颜色 */
  }
  </style>